// 示例3：用 watchEffect 监听鼠标位置
import { ref, watchEffect, onUnmounted } from 'vue';

// 创建响应式鼠标坐标
const mouseX = ref<number>(0);
const mouseY = ref<number>(0);

// 使用watchEffect监听鼠标位置变化
function setupMousePositionTracker() {
  // 鼠标移动事件处理函数
  const handleMouseMove = (event: MouseEvent) => {
    mouseX.value = event.clientX;
    mouseY.value = event.clientY;
  };

  // watchEffect会自动收集依赖并在组件挂载时运行
  const stopTracking = watchEffect(() => {
    // 这里访问了mouseX和mouseY，watchEffect会追踪这些依赖
    console.log(`当前鼠标位置: (${mouseX.value}, ${mouseY.value})`);
    
    // 在副作用函数中添加事件监听
    window.addEventListener('mousemove', handleMouseMove);
    
    // 返回清理函数，在组件卸载或重新运行副作用时执行
    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
      console.log('已停止鼠标位置监听');
    };
  });

  return {
    mouseX,
    mouseY,
    stopTracking // 提供停止监听的方法
  };
}

// 在Vue组件中使用示例
export function MouseTrackerDemo() {
  console.log('开始监听鼠标位置...');
  const { stopTracking } = setupMousePositionTracker();
  
  // 模拟3秒后停止监听
  setTimeout(() => {
    stopTracking();
  }, 30000); // 30秒后自动停止，实际使用中可以根据组件生命周期控制
}

// HTML模板示例（可在实际Vue组件中使用）
/*
<template>
  <div>
    <h3>鼠标位置追踪</h3>
    <p>X坐标: {{ mouseX }}</p>
    <p>Y坐标: {{ mouseY }}</p>
    <button @click="stopTracking">停止追踪</button>
  </div>
</template>
*/